<template>
    <h1 ref="myh1">我是 APP 组件 --- {{ num }}</h1>
    <button @click="num++">修改 num</button>
    <button @click="num2++">修改 num2 {{ num2 }}</button>

    <button @click="flag = false">点击卸载 child1</button>
    <child1 v-if="flag" />
</template>

<script>
/**
 *  生命周期
 *      组件从创建到挂载, 到数据更新, 一直到最后的销毁的一个完整过程
 *
 *      生命周期一个分为 四个大阶段, 分别:
 *          创建阶段:
 *              创建前
 *              创建后
 *          挂载阶段:
 *              挂载前
 *              挂载后
 *          更新阶段:
 *              数据更新前
 *              数据更新后
 *          卸载阶段:
 *              卸载前
 *              卸载后
 *
 *      上述的所有生命周期 其实都是一个指定的函数
 */
import child1 from "./components/child1.vue";
export default {
    data() {
        return {
            msg: "数据",
            num: 100,
            num2: 10086,
            flag: true
        };
    },
    methods: {
        getMsg() {
            console.log(this.msg);
        },
    },
    components: {
        child1,
    },

    // 第三个阶段
    beforeUpdate () {
        console.log('5. 当前组件的数据更新前', this.$refs.myh1.innerHTML)
    },
    updated () {
        console.log('6. 当前组件的数据更新后', this.$s.myh1.innerHTML)
    }
};
</script>

<style></style>
